<!--
 * @Author       : xiaoxiaoguai
 * @Date         : 2025-06-12 14:38:59
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2025-07-18 17:20:22
 * @Description  : 
-->
<!--
 * @Author       : xiaoxiaoguai
 * @Date         : 2025-06-12 14:38:59
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2025-06-12 14:42:34
 * @Description  : 
-->
<template>
	<layout>
		<view class="container">
			<z-paging
				ref="paging"
				v-model="dataList"
				@query="queryList"
				:show-refresher-when-reload="true"
				:auto-show-back-to-top="true"
				:refresher-fps="0"
				:refresher-end-bounce-enabled="false"
				:refresher-default-duration="0"
				:refresher-complete-delay="150"
				refresher-pulling-text="松开刷新"
				refresher-default-text="再往下拉"
				:refresher-complete-duration="0"
				:refresher-refreshing-scrollable="false"
				:paging-style="{ background: '#eff6f8', padding: '20rpx' }">
				<template #top>
					<uv-navbar
						:fixed="true"
						:placeholder="true"
						@leftClick="$onClickLeft"
						:title="title"
						bgColor="#fff"/>
				</template>
				<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
				<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
				<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
				<view
					class="vip_card"
					v-for="(item, index) in dataList"
					:style="{
						backgroundImage: 'url(' + item.styleImg + ')',
						backgroundSize: '100% 100%',
					}"
					:key="index"
					@click="itemClick(item, index)">
					<view class="vip_card-title">
						<image src="/static/images/mine/vip.png"></image>
						<view>{{ item.name }}</view>
					</view>
					<view class="vip_card-detail">
                        <view class="price">{{ item.price }}元</view>
                        <view class="period">{{ item.period }}月有效期</view>
                    </view>
                    <view class="bottom">
                        <text style="border-bottom: 2rpx solid #fff;">前往查看</text>
                    </view>
				</view>
			</z-paging>
		</view>
	</layout>
</template>

<script setup>
	import { ref, computed,nextTick } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { userGetUserInfo, mineService, vipCardPage } from '@/api/user'

	const title = ref('会员中心')
	const dataList = ref([])
	const paging = ref()
	onShow(() => {})
    const itemClick = (item, index) => {
        let params = JSON.stringify(item)
        uni.navigateTo({
            url: `/pages/components/pages/vipCard/vipCard?item=${params}`
        })
    }
	const queryList = (pageNo, pageSize) => {
		// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
		// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
		// 模拟请求服务器获取分页数据，请替换成自己的网络请求
		const params = {
			page: pageNo,
			limit: pageSize,
		}
		vipCardPage(params)
			.then(res => {
				// 将请求的结果数组传递给z-paging
				paging.value?.complete(res.list)
			})
			.catch(res => {
				// 如果请求失败写this.$refs.paging.complete(false);
				// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				paging.value.complete(false)
			})
	}
</script>

<style lang="scss" scoped>
	page {
		height: auto;
		min-height: 100%;
	}
	.container {
		background-color: #fff;
		padding: 20rpx;
		overflow: auto;
		display: flex;
		flex-direction: column;
		.vip_card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
			width: 100%;
			height: 400rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			padding: 30rpx;
            color: #fff;
			.vip_card-title {
				display: flex;
				align-items: center;
                font-size: 30rpx;
				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}
            .vip_card-detail{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                .price{
                    font-size: 36rpx;
                }
                .period{
                    margin-top: 20rpx;
                    font-size: 26rpx;
                }
            }
            .bottom{
                display: flex;
                justify-content: center;
                margin-bottom: 20rpx;
                font-size: 26rpx;
            }
		}
	}
</style>
